<template>
	<view class="container">
		<view class="content" ref="content">
			<view class="message" v-for="msg in messageList" :key="msg.id">
				<view class="mess.left" v-if="msg.type == 'left'">
					<img src="../../static/image/robt.png" alt=""><br>
				</view>
				<view class="message-content" :class="{left: msg.type === 'left', right: msg.type === 'right'}">
					{{ msg.content }}
				</view>
			</view>
		</view>
		<view class="input">
			<input type="text" class="message-input" placeholder="请输入你要发送的消息" v-model="inputValue"
				@keyup.enter="sendMessage" />
			<img src="../../static/image/kefu.png" alt="" class="biaoqing" @click='biaoqingbao'>
			<button class="send-button" @click="sendMessage">发送</button>
		</view>
		<view class="bqku" v-show="biaoqingkg">
			<span class="Detail_item" v-for="(item,index) in bqbao" :key="index" @click='cmick(item)'>{{item}}</span>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bqbao: ['', '', '', '', '', '', '',
					'', '', '', '', '', '', '🥰', '', '🤩', '', '', '', '🤪'
				],
				messageList: [], // 消息列表
				inputValue: '', // 输入框的值
				biaoqingkg: false,
				arr: []
			};
		},
		methods: {
			cmick(item) {
				this.arr.push(item)
				let brr = this.arr.join('')
				this.inputValue = brr;
			},
			biaoqingbao() {
				this.biaoqingkg = !this.biaoqingkg
			},
			// 发送消息
			sendMessage() {
				this.biaoqingkg = false;
				let _this = this;
				// 获取输入框的值
				const content = _this.inputValue.trim();
				// 如果输入框为空，则不做任何处理
				if (!content) return;
				const message = {
					id: Date.now(),
					type: 'right',
					content: content,
				};
				_this.messageList.push(message); // 把新消息添加到消息列表中
				_this.inputValue = ''; // 清空输入框的值
				_this.arr = [];
				//获取腾讯机器人消息
				uni.request({
					url: 'http://chat.dslcv.com/sendMessaage',
					method: 'GET',
					data: {
						msg: content
					},
					success(res) {
						const reply = {
							id: Date.now(),
							type: 'left',
							content: res.data.Reply,
						};
						_this.messageList.push(reply);
					}
				})

			},
		},
	};
</script>

<style lang="scss">
	.Detail_item {
		font-size: 60rpx;
		padding: 8rpx;
	}

	.bqku {
		border-radius: 20rpx;
		width: 80vw;
		height: 30vh;
		background-color: #fff;
		margin-left: 10vw;
	}

	.biaoqing {
		width: 50rpx;
		height: 50rpx;
		margin: 0 10rpx;
	}

	.container {
		display: flex;
		flex-direction: column;
		height: 90vh;
		width: 100vw;
		background-color: rgb(245, 245, 245);
	}

	.content {
		flex: 1;
		padding: 20rpx;
		overflow-y: auto;
		width: 100vw;
	}

	.message {
		width: 100vw;
		display: flex;

		.message-content.left {
			background-color: #fff;
			color: #333;
			margin: 8rpx 0;
			justify-content: flex-start;
			border-radius: 0 20rpx 20rpx 20rpx;
		}

		img {
			width: 60rpx;
			height: 60rpx;
		}

		.mess.left {
			img {
				margin-right: 20rpx;
			}
		}

		.message-content.right {
			background-color: #4a90e2;
			color: #fff;
			margin-left: auto;
			margin-right: 40rpx;
			justify-content: flex-end;
		}
	}

	.message-content {
		padding: 20rpx;
		border-radius: 10rpx;
		max-width: 60%;
		line-height: 1.8;
	}

	.input {
		display: flex;
		justify-content: space-around;
		position: fixed;
		width: 100vw;
		height: 10vh;
		bottom: 0;
		align-items: center;
		background-color: rgb(245, 245, 245);
	}

	.message-input {
		flex: 1;
		padding: 10rpx;
		margin-right: 20rpx;
		font-size: 32rpx;
		background-color: #fff;
		border-radius: 20rpx;
		outline: none;
		margin-left: 40rpx;
	}

	.send-button {
		font-size: 32rpx;
		border: none;
		outline: none;
		background-color: red;
		color: #fff;
		border-radius: 10rpx;
		margin-right: 40rpx;
	}
</style>